<template>
	<view class="all">
		<view class="top" :style="{
		backgroundImage: $img('https://s4.ax1x.com/2022/01/19/7r5Y1H.png'),
		'margin-top': height 
		}">
			<my-tab />
		</view>
		<view :class="current!=3?'body':'body20'">
			<!-- 精品推荐课 -->
			<view class="body1" @click="sunmit(current,item)" v-for="(item,index) in 5" v-if="current==0||current==1">
				<view class="body_1" :style="{
				backgroundImage: 'url('+'https://s4.ax1x.com/2022/01/19/7rI1rn.png'+')'
				}">
					<image v-if="index%2==0" src="https://s4.ax1x.com/2022/01/19/7r7sZn.png"
						style="width:64rpx ;height:36rpx;margin: 20rpx 0 0 20rpx;" />
					<image v-if="index%2!=0" src="https://s4.ax1x.com/2022/01/19/7rXeIA.png"
						style="width:64rpx ;height:36rpx;margin: 20rpx 0 0 20rpx;" />
				</view>
				<view class="body_1_1">给管理者们的沟通训...</view>
				<view class="body_1_2">尤其在竞争日益激烈的今...</view>
				<view class="body_1_3">
					<view class="body_1_30">
						<text>124</text>人已学习
					</view>
					<view class="body_1_31" v-if="index%2!=0">￥19.90</view>
				</view>
			</view>
			<!-- 直播课 -->
			<view class="zhibo" v-if="current==2">
				<view class="" v-for="(item,index) in 5">
					<view class="body2">
						<image class='imgall' :src="require('@/static/img/4608.png')" />
						<view class="text">
							<view class="text_1">如何让你的课堂气氛更氛更 如何让你的课堂气氛更氛更 如何让你的课堂气氛更氛更</view>
							<view class="text_2">幽默让学生更加喜欢你学生更加幽默让学生更加喜欢你学生更加......</view>
							<view class="text_3">
								<view class="" style="position: relative;bottom: -10px;">
									<text>451</text> <text style='font-weight: 600; color: black;'>人已预约</text>
								</view>
								<image @click="submit()" :src="index%2?src1:src" />
							</view>
						</view>
					</view>
					<view class="xian" v-if="index!=4" />
				</view>

			</view>
		</view>
		<!-- 线下课 -->
		<view class="xianxia" v-if="current==3">
			<view class="xianxia_1" v-for="(item,index) in 5">
				<image style="width:100% ;height:240.07rpx ;" src="https://s4.ax1x.com/2022/01/23/74otMR.png" />
				<view class="xianxia_2">
					<view class="xianxia_2_1 mybox">
						<text class="xianxia_2_1t">教育的未来前瞻【洛阳站】</text>
						<text class="xianxia_2_t"><text>124</text>人已报名</text>
					</view>
					<view class="xianxia_2_2">
						幼儿教育是考研教师如果课堂纪律不好，孩子们就会相互影
						响，且认为老师是不负责任。
					</view>
					<view class="xianxia_2_3 mybox">
						<text>课程时间：2021年10月10日</text>
						<image style="width:160rpx ;height: 58rpx;" :src="require('@/static/img/bm.png')" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: require('@/static/img/hf.png'),
				src1: require('@/static/img/yy.png'),
				current: '',
				height: '',

			};
		},
		methods: {
			sunmit(a, b) {
				uni.navigateTo({
					url: '/pages/play/purchase'
				});
			},
		},
		mounted() {
			this.height = this.$top
		},
		onLoad(option) {
			this.current = option.current

		}
	}
</script>

<style lang="scss">
	.mybox {
		display: flex;
		justify-content: space-between;
	}

	.xianxia {
		padding: 0rpx 30rpx 20rpx 30rpx;
		background-color: rgb(248, 248, 250);
		min-height: 1000rpx;

		.xianxia_1 {
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
		}

		.xianxia_2 {
			padding: 0rpx 15rpx 15rpx 15rpx;

			.xianxia_2_3 {
				margin-bottom: 20rpx;

				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #131314;
				}
			}

			.xianxia_2_2 {
				margin: 15rpx 0rpx 15rpx 0rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 40rpx;
				color: #131314;
				letter-spacing: 2rpx;
				opacity: 1;
			}

			.xianxia_2_1 {
				align-items: flex-end;

				.xianxia_2_t {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400 !important;
					color: #131314;
					opacity: 1;

					text {
						color: #FF2424;
					}
				}

				.xianxia_2_1t {
					margin-top: 10rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
					opacity: 1;
				}
			}
		}
	}

	.zhibo {
		width: 100%;

		.xian {
			height: 1rpx;
			background-color: #EFEFEF;
			margin-top: 30rpx;
		}

		.body2 {
			width: 100%;
			margin-top: 30rpx;
			display: flex;

			.imgall {
				width: 240rpx;
				height: 160rpx;
			}

			.text {
				margin-left: 15rpx;
				width: 65%;
				position: relative;

				.text_1 {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					line-height: 33rpx;
					color: #131314;
					opacity: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.text_2 {
					width: 90%;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 36px;
					color: #91969A;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

				}

				.text_3 {
					display: flex;
					justify-content: space-between;
					position: absolute;
					bottom: 0;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #131314;
					opacity: 1;
					width: 100%;

					image {
						width: 140rpx;

						height: 58rpx;
					}

					text {
						color: rgb(255, 64, 64);
					}
				}

			}
		}

	}

	.body20 {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: rgb(248, 248, 250)
	}

	.body {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.body1 {
		margin-bottom: 20rpx;
		width: 345rpx;

		.body_1_1 {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #131314;
			opacity: 1;
		}

		.body_1_3 {
			display: flex;
			justify-content: space-between;

			.body_1_31 {
				font-size: 30rpx;
				font-family: HarmonyOS Sans;
				font-weight: 600;
				color: #FF2424;
				opacity: 1;
			}

			.body_1_30 {
				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #131314;
					opacity: 1;
				}

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF2424;
					opacity: 1;
				}
			}
		}

		.body_1_2 {
			margin: 10rpx 0 10rpx 0;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #91969A;
			opacity: 1;
		}
	}

	.body_1 {
		width: 100%;
		height: 196rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.top {
		padding: 0rpx 20rpx 20rpx 20rpx;
		height: 510rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>
